<template>
  <div class="f-dialog">
    <el-dialog
      top="30vh"
      width="650px"
      :visible.sync="isShow"
      :show-close="true"
      @close="onClose"
    >
      <span class="f-title" slot="title">{{ title }}</span>
      <div class="f-body">
        <div class="body-item">
          <div class="body-item-left">课程名称：</div>
          <div class="body-item-right body-item-text">
            <el-input
              v-model="courseName"
              placeholder="请输入课程名称"
              @blur="validateCourseName"
              @focus="vali1 = false"
              clearable
            ></el-input>
            <transition name="el-fade-in-linear">
              <div class="body-item-tip" v-show="vali1">{{ tip1 }}</div>
            </transition>
          </div>
        </div>
        <div class="body-item">
          <div class="body-item-left">课程描述：</div>
          <div class="body-item-right body-item-textarea">
            <el-input
              type="textarea"
              v-model="courseDesc"
              placeholder="请输入课程描述"
              :rows="4"
              resize="none"
              @blur="validateCourseDesc"
              @focus="vali2 = false"
            ></el-input>
            <transition name="el-fade-in-linear">
              <div class="body-item-tip" v-show="vali2">{{ tip2 }}</div>
            </transition>
          </div>
        </div>
      </div>
      <div class="f-foot">
        <div class="f-btn f-btn-blue" @click="btnConfirm">确认</div>
        <div class="f-btn f-btn-white-black f-btn-right" @click="btnCancel">
          取消
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "NormalDialog",

  data() {
    return {
      // 标题
      title: "新增课程",
      // 是否显示弹出框
      isShow: false,
      // 课程id
      id: 0,
      // 课程名称
      courseName: "",
      // 课程描述
      courseDesc: "",
      tip1: "课程名称提示",
      tip2: "课程描述提示",
      vali1: false,
      vali2: false,
    };
  },

  methods: {
    // ================================================= 后端API =================================================
    // 「新增课程」
    addCourse() {
      this.$api.teacher
        .courseAdd(this.courseName, this.courseDesc)
        .then((res) => {
          console.group("课程新增 >>>");
          console.log(res);
          console.groupEnd();
          if (res.code == 0) {
            this.$message.success(`${this.courseName} 添加成功`);
            this.$emit("confirm", res.data);
          } else {
            this.$message.error(res.message);
            if (res.code == 1005) {
              this.vali1 = true;
              this.tip1 = "课程已存在";
            }
          }
        });
    },

    // 「编辑课程」
    editCourse() {
      this.$api.teacher
        .courseEdit(this.id, this.courseName, this.courseDesc)
        .then((res) => {
          console.group("课程编辑 >>>");
          console.log(res);
          console.groupEnd();
          if (res.code == 0) {
            this.$message.success(`${this.courseName} 编辑成功`);
            this.$emit("editConfirm", res.data);
          } else {
            this.$message.error(res.message);
            if (res.code == 1005) {
              this.vali1 = true;
              this.tip1 = "课程已存在";
            }
          }
        });
    },

    // ================================================= 前端事件 =================================================
    // 打开弹窗
    showTip(item) {
      if (item) {
        this.title = "编辑课程";
        this.id = item.id;
        this.courseName = item.courseName;
        this.courseDesc = item.courseDesc;
      }
      this.isShow = true;
      // TODO: 这种不写监听事件
      // 绑定监听事件
      // window.addEventListener("keyup", this.listenKeyboard);
    },

    // 关闭弹窗
    closeTip() {
      this.isShow = false;
    },

    // 被关闭后的回调函数
    onClose() {
      // 清空下初始信息
      this.id = 0;
      this.courseName = "";
      this.courseDesc = "";
      this.title = "新增课程";
      this.vali1 = false;
      this.vali2 = false;
      // 销毁监听事件
      // window.removeEventListener("keyup", this.listenKeyboard);
    },

    // 取消
    btnCancel() {
      this.closeTip();
    },

    // 确认
    btnConfirm() {
      if (this.validateAll()) {
        if (this.id != 0) {
          // 编辑
          this.editCourse();
        } else {
          // 新增
          this.addCourse();
        }
      }
    },

    // ====================================== 表单验证 ============================
    validateCourseName() {
      if (!this.courseName) {
        this.tip1 = "请输入课程名称";
        this.vali1 = true;
      }
    },

    validateCourseDesc() {
      if (!this.courseDesc) {
        this.tip2 = "请输入课程描述";
        this.vali2 = true;
      }
    },

    // 提交时的验证
    validateAll() {
      this.validateCourseName();
      this.validateCourseDesc();
      if (this.vali1 || this.vali2) {
        // 验证失败
        return false;
      } else {
        // 验证通过
        return true;
      }
    },
  },
};
</script>

<style lang="less" scoped>
.f-dialog {
  .f-foot {
    margin-top: 30px;
    padding-bottom: 15px;
    .f-btn-right {
      margin-left: 60px !important;
    }
  }
}
</style>